{extend name="public/common"} {block name="body"}
<title>基本设置</title>
</head>
<link rel="stylesheet" type="text/css" href="__SYSMET__/h-ui.admin/css/kaiguan.css" />
<style>
.tabBar a {
	background-color: #e8e8e8;
	cursor: pointer;
	display: inline-block;
	float: left;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	padding: 0 15px
}

.tabBar a.current {
	background-color: #636363;
	color: #fff;
}
.tabBar a:hover{
	color: #333;
}
.bg-1 {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}
.radius:hover{
 	color: #333;
	background-color: #e5e5e5;
    border-color: #e5e5e5;
 }
.radius1:hover{
 	color: #fff;
	border-color: #66b1ff;
	background-color: #66b1ff;
 }
 span:hover{
 	color: #333;
 }
 .btn-primary1 {
    color: #fff;
    background-color: #5a98de;
    border-color: #5a98de;
    height: 31px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 24px !important;
}
.label-success[href], .badge-success[href] {
    background-color: #636363;
    color: #fff;
}



</style>
<body>
	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i>
		系统管理
		<span class="c-gray en">&gt;</span>
		运营管理
		<span class="c-gray en">&gt;</span>
		外部客服
		<span class="c-gray en">&gt;</span>
		{if condition="$type == 1" }QQ客服{/if}
		{if condition="$type == 2" }微信客服{/if}
		{if condition="$type == 4" }在线客服{/if}
		<a class="btn btn-success radius r"
			style="line-height: 1.6em; margin-top: 3px"
			href="javascript:location.replace(location.href);" title="刷新">
			<i class="Hui-iconfont">&#xe68f;</i>
		</a>
	</nav>
	
	<div style="padding:20px;height:30px;">
  	
  	<div class="new_box" style="margin-bottom: 20px;">
	<div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a class="btn btn-primary radius" data-title="添加客服" href="{:url('admin/Systemsettings/ht_servicenew?id')}"><i class="Hui-iconfont">&#xe600;</i> 添加客服</a></span></div>
	<div class="page-container">
		<div id="tab-system" class="HuiTab">
			<div class="tabBar cl">
				
				<a href="{:url('systemsettings/ht_wbkf')}?kftype=1" {if
					condition="$type == 1" }class="current"{/if}>QQ客服</a>
				<a href="{:url('systemsettings/ht_wbkf')}?kftype=2" {if
					condition="$type == 2" }class="current"{/if}>微信客服</a>
				
				<a href="{:url('systemsettings/ht_wbkf')}?kftype=4" {if
					condition="$type == 4" }class="current"{/if}>在线客服</a>

			</div>
			<div class="tabCon">
				<div class="mt-20">
					{if condition="$type!=4"}
					<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
						<thead>
							<tr class="text-c">
								<th>ID</th>
								<th>客服名称</th>
								{if($type==1 || $type==2)}<th>类型</th>{/if}
								<th>{if condition="$type == 0 || $type == 1"}QQ号{elseif condition="5==$type"}邮件地址{else/}微信号{/if}</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							{volist name="list" id="vo"}
							<tr class="text-c">
								<td>{$vo.id}</td>
								<td class="text-l">{$vo.name}</td>
								{if($type==1 || $type==2)}<td>{if($vo.type==0)}游客{/if}{if($vo.type==1)}会员{/if}{if($vo.type==2)}游客{/if}{if($vo.type==3)}会员{/if}</td>{/if}
								<td>{$vo.qq}</td>
								<td class="td-status">
									{if condition="$vo['status']==1"}
									<a class="label label-success radius"
										href="/admin/systemsettings/serviceStatus?id={$vo.id}&status=0&kftype={$Think.get.kftype}">正常</a>
									{else/}
									<a class="label label-danger radius"
										href="/admin/systemsettings/serviceStatus?id={$vo.id}&status=1&kftype={$Think.get.kftype}">禁用</a>
									{/if}
								</td>
								<td class="f-14 td-manage">
									<a style="text-decoration: none" class="ml-5"
										href="javascript:;"
										onclick="if(confirm('是否确认操作？')) {window.location.href='/admin/systemsettings/serviceDel?id={$vo.id}&kftype={$Think.get.kftype}'}">
										<i class="Hui-iconfont">&#xe6e2;</i>
									</a>
								</td>
							</tr>
							
							{/volist}

						</tbody>
					</table>
					{else/}
					<article class="page-container">
					<form class="form form-horizontal" action="" id="form-admin-add" method="post">
					<div class="row cl">
						<label style="float: left;" class="form-label">在线客服名称：</label>
						<div class="formControls col-xs-8 col-sm-8">
							<input type="text" class="input-text" id="name" name="name" value="{$list.name ? $list.name : ''}">
						</div>
						<span id="a1" style="display: none;"></span>
					</div>
					<div class="row cl">
						<label style="float: left;" class="form-label">在线客服URL：</label>
						<div class="formControls col-xs-8 col-sm-8">
							<input type="text" class="input-text" id="qq" name="qq" value="{$list.qq ? $list.qq : ''}">（请以http://开头）
						</div>
						<span id="b1" style="display: none;"></span>
					</div>
					<input type="hidden" name="type" value="4">
					<div class="row cl">
						<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
							<button class="btn btn-primary btn-primary1 radius radius1" name="submit"
								type="submit" id="tijiao">
								<i class="Hui-iconfont">&#xe632;</i>
								保存
							</button>
							<input type="button" style="margin-left: 5px;"
								onclick="JavaScript:history.go(-1)"
								class="btn btn-primary btn-primary1 radius radius1" value="返回" />
						</div>
					</div>
					</form>
					</article>
					{/if}
				</div>
			</div>
		</div>
	</div>
	
	<div style="margin-bottom: 20px;position: relative;">
		<span style="position: absolute;top: -1px;left: 25px;font-size: 16px;">开关：</span>
		<div class="toggle toggle--knob" style="width: 14%;">
		<input type="checkbox" id="toggle--knob-{$type}" class="toggle--checkbox">

		<label class="toggle--btn" for="toggle--knob-{$type}" onclick="func(this,{$type})">
			<span class="toggle--feature" data-label-on="on" data-label-off="off" style="color: white;font-size: 16px;"></span>
		</label>
	</div>
	</div>
	
	
	</div>
	</div>

	{/block} {block name="js"}
	<script type="text/javascript">
	function func(obj, id) {
        if ($("#toggle--knob-"+id).is(':checked')) {
            var shijian='开启';
            var status = 1;
        }else{
            var shijian='关闭';
            var status = 0;
        }
        //alert(id);
        $.ajax({
            type : 'post',
            url : "{:url('systemsettings/kf_open')}",
            data:{'type':id,'status':status},
            dataType : 'html',
            success : function(data) {
                //console.log(data);return;
                if(data == 1){
                    layer.msg('已'+shijian+'!', {
                        icon : 1,
                        time : 1000
                    });
                    //setTimeout('window.location.reload()',1000);
                }

            },
             error : function(data) {
                 console.log(data.msg);
             },
        });

    }
	
	
		$(function() {
			$('.skin-minimal input').iCheck({
				checkboxClass : 'icheckbox-blue',
				radioClass : 'iradio-blue',
				increaseArea : '20%'
			});
			$("#tab-system").Huitab({
				index : 0
			});
		});
		$("#tijiao").click(function(){
			var name=$('#name').val();
			var qq=$('#qq').val();
			var radio = document.getElementsByName('type');
			var han = /^[\u4e00-\u9fa5]+$/;
			var bValidate = RegExp(/^[1-9][0-9]{4,12}$/).test(qq);
			if(name==''){
				$("#a1").css('display','block').html('客服名称不能为空');
				return false;
			}else if(qq==''){
				$("#b1").css('display','block').html('客服QQ不能为空');
				return false;
			}else{
				if(han.test(name)){
					$("#a1").css('display','none');
						$("#b1").css('display','none');
						$.ajax({
							type:'POST',
					          url:"{:url('Systemsettings/add_kefu')}",
					          data:{
					            'name':name,'qq':qq,'type':4
					          },
					          success:function(data){
					        	  console.log(data);
					        	  return false;
					        	  /* if(data=='1'){
					        		  alert('添加成功');
					        	  }else if(data=='0'){
					        		  alert('添加失败');
					        	  }else if(data=="2"){
					        		  alert('客服名称不能为空');
					        	  }else if(data=="3"){
					        		  alert('QQ号码不能为空');
					        	  } */
					          },
					          error:function(msg){
					        	  console.log(msg);
					        	  return false;
					          }
						});
				}else{
					$("#a1").css('display','block').html('客服名称必须为汉字');
					return false;
				}
			}
		});
	</script>
	{/block}